<template>
    <van-nav-bar title="个人资料" left-text="" left-arrow @click-left="goBack" />
    <div class="clear"></div>
    <div class="user">
        <div class="user-image">
            <img :src="LoginUser.avatar" alt="">
        </div>
    </div>
    <div class="from">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 昵称 -->
                <van-field v-model="LoginUser.nickname" name="nickname" label="昵称" placeholder="昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]" />
                <!-- 密码 -->
                <van-field v-model="LoginUser.password" type="password" name="password" label="密码" placeholder="密码" />
                <!-- 邮箱 -->
                <van-field v-model="LoginUser.email" type="email" name="email" label="邮箱" placeholder="邮箱" />
                <!-- 性别 -->
                <van-field name="gender" label="性别">
                    <template #input>
                        <van-radio-group v-model="LoginUser.gender" direction="horizontal">
                            <van-radio name="0">保密</van-radio>
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>

                <!-- 省市区 -->
                <van-field v-model="LoginUser.region" is-link readonly label="地区选择" placeholder="点击选择省市区"
                    @click="showArea = true" />
                <van-popup v-model:show="showArea" position="bottom">
                    <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                </van-popup>

                <!-- 头像 -->
                <van-field name="avatar" label="头像">
                    <template #input>
                        <van-uploader v-model="avatar" :max-count="1" />
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>


</template>
<script setup>
//返回上一页
const goBack = () => {
    history.back()
}

// 引入路由
const router = useRouter()

// 引入cookies
const { cookies } = useCookies();

// 获取cookies
const LoginUser = reactive(cookies.get('LoginUser') ?? {})// 登录用户信息

import { areaList } from '@vant/area-data';

const showArea = ref(false);
const onConfirm = ({ selectedOptions }) => {
    showArea.value = false;
    let region = ''
    let [province, city, district] = selectedOptions;
    if (province) {
        region = province.text + '-'
        LoginUser.province = province.value
    }
    if (city) {
        region += city.text + '-'
        LoginUser.city = city.value
    }
    if (district) {
        region += district.text
        LoginUser.district = district.value
    }
    LoginUser.region = region
};

const avatar = ref([
    { url: LoginUser.avatar },
]);

const onSubmit = async (values) => {
    let data = {
        id: LoginUser.id,
        nickname: values.nickname,
        gender: values.gender,
        email: values.email,
        province: LoginUser.province,
        city: LoginUser.city,
        district: LoginUser.district,
    }
        
    //判断是否修密码
    if (values.password) {
        data.password = values.password
    }

    //判断是否修改头像
    if (values.avatar.length > 0 && values.avatar[0].file) {
        data.avatar = values.avatar[0].file;
    }
    let result = await Api.profile(data);
    if (result.code == 1) {
        showSuccessToast({
            message: result.msg,
            onClose: function () {
                router.push('/business/base/index')
            }
        })
    }else{
        showFailToast(result.msg)
    }
};
</script>
<style>
@import url('/public/assets/css/profile.css');
</style>

<style>
.van-button--primary{
    background: #32806f;
    border:#32806f
}
.van-nav-bar {
    background: #32806f;
}
.van-nav-bar .van-icon {
    color: #fff;
}
.van-nav-bar__title {
    color: #fff;
}
</style>